import React, { useState } from 'react';
import { request, useRequest } from 'ice';
import { Box, Card, Tag, ResponsiveGrid, Typography, Loading, Slider, Dialog } from '@alifd/next';

import styles from './index.module.scss';

const { Group: TagGroup, Selectable: SelectableTag } = Tag;
const { Cell } = ResponsiveGrid;

export interface ICardItem {
  _id: string;
  name: string;
  description: string;
  imgUrls: string[];
  price: number;
  originalPrice: number;
  quota: number;
  audit: {
    status: 0 | 1 | 2;
    reason: string;
  };
  store: {
    _id: string;
    name: string;
    description: string;
    imgUrl: string;
    address: string;
    location: { type: 'Point'; coordinates: [number, number] };
    phoneNumber: string;
  };
}

const auditTags = ['审核中', '已通过', '未通过'];

const CardList: React.FunctionComponent = (): JSX.Element => {
  const [audit, setAudit] = useState('审核中');

  const { data, loading, request: sRequest } = useRequest(
    (status = auditTags.indexOf(audit)) => ({
      url: '/api/promotion',
      params: {
        audit: status,
      },
    }),
    {
      manual: false,
    },
  );

  const onAuditTagChange = (v: string) => {
    sRequest(auditTags.indexOf(v));
    setAudit(v);
  };

  const renderAuditTags = () => {
    return auditTags.map((name: string) => (
      <SelectableTag key={name} checked={audit === name} onChange={() => onAuditTagChange(name)}>
        {name}
      </SelectableTag>
    ));
  };

  const renderCards = () => {
    return data?.map((c: ICardItem, i: number) => (
      <Cell key={i} colSpan={3} className={styles.ListItem}>
        <div className={styles.main}>
          <Slider className={styles.slider}>
            {c.imgUrls.map((v, i) => (
              <div key={i} className={styles.img}>
                <img src={v} alt="img" />
              </div>
            ))}
          </Slider>
          <div className={styles.content}>
            <Box direction="row" justify="space-between" align="center">
              <div className={styles.name}>{c.name}</div>
              {
                // eslint-disable-next-line no-nested-ternary
                c.audit?.status === 1 ? (
                  <Tag size="small" color="green">
                    已通过
                  </Tag>
                ) : c.audit?.status === 2 ? (
                  <Tag size="small" color="red">
                    未通过
                  </Tag>
                ) : (
                  <Tag
                    size="small"
                    color="yellow"
                    onClick={() => {
                      Dialog.show({
                        title: '审核',
                        content: '是否通过此次审核？',
                        okProps: { children: '通过' },
                        onOk: async () => {
                          await request.put(`/api/promotion/${c._id}/audit/1`, {});
                          sRequest();
                        },
                        cancelProps: { children: '拒绝' },
                        onCancel: async () => {
                          await request.put(`/api/promotion/${c._id}/audit/2`, { reason: '' });
                          sRequest();
                        },
                      });
                    }}
                  >
                    审核中
                  </Tag>
                )
              }
            </Box>
            <div className={styles.description}>{c.description}</div>
            <Box className={styles.price} direction="row" align="center" spacing={10}>
              <div className={styles.current}>{c.price}</div>
              <div className={styles.original}>{c.originalPrice}</div>
              <Tag size="small" color="blue">
                限 {c.quota}
              </Tag>
            </Box>
            <Box className={styles.store} direction="row">
              <div className={styles.img}>
                <img src={c.store.imgUrl} />
              </div>
              <div className={styles.textArea}>
                <div className={styles.name}>{c.store.name}</div>
                <div className={styles.description}>{c.store.description}</div>
                <div className={styles.description}>地址：{c.store.address}</div>
              </div>
            </Box>
          </div>
        </div>
      </Cell>
    ));
  };

  return (
    <>
      <Card free className={styles.CardList}>
        <Box className={styles.TagBox}>
          <div className={styles.TagBoxItem}>
            <Typography.Text className={styles.TagTitleName}>状态</Typography.Text>
            <TagGroup>{renderAuditTags()}</TagGroup>
          </div>
        </Box>
      </Card>
      <Loading visible={loading} style={{ display: 'block' }}>
        <ResponsiveGrid gap={20}>{renderCards()}</ResponsiveGrid>
      </Loading>
    </>
  );
};

export default CardList;
